<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/abnormal' }">异常订单</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="abnormal-page">
			<div class="title">
				异常订单
			</div>
			<div class="top-tabs">
				<div v-for="item in tabsList" :key="item.index"
					:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item" @click="cutTabs(item)">
					{{item.name}}
				</div>
			</div>
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type == '2'" class="rounded-input" @blur="blurClick()"
						@focus="focusClick(item)" :placeholder="item.placeholder" />
					<el-date-picker v-if="item.type=='3'" v-model="item.ivalue" type="datetime"
						:placeholder="item.placeholder" style="width: 250px;" :suffix-icon="CaretBottom" />
				</div>
			</div>
			<div class="btn-box">
				<div class="btn-left">
					<el-button round color="#0071bb">导出订单</el-button>
					<el-button round :icon="Refresh">刷新</el-button>
					<el-button round :icon="HelpFilled">筛选</el-button>
				</div>
				<div class="choice-btn">
					<el-button round :icon="Search" color="#0071bb">查询</el-button>
					<el-button round :icon="RefreshLeft">重置</el-button>
				</div>
			</div>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="selection" v-model="whole" />
					<el-table-column prop="id" label="序号" width="80px" />
					<el-table-column prop="open_time" label="开门时间" />
					<el-table-column prop="close_time" label="关门时间" />
					<el-table-column prop="pay_time" label="支付时间" />
					<el-table-column prop="pay_method" label="支付方式" />
					<el-table-column prop="order_num" label="订单号" />
					<el-table-column prop="order_type" label="订单状态">
						<template #default="scope">
							<div class="handle" v-if="scope.row.order_type == '已处理'">
								{{ scope.row.order_type}}
							</div>
							<div class="abnormal" v-else>
								{{ scope.row.order_type}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="设备名称" />
					<el-table-column prop="imei" label="设备IMEI号" />
					<el-table-column prop="tell" label="手机号码" />
					<el-table-column prop="personnel" label="补货员" />
					<el-table-column prop="check" label="查看">
						<template #default="scope">
							<div class="check-text">
								{{ scope.row.check}}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { CaretBottom, Refresh, HelpFilled, Search, RefreshLeft } from '@element-plus/icons-vue'
	interface tabsList {
		name : string;
		index : string;
	}
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const activeIndex = ref("1");
	const choiceIndex = ref("");
	const whole = ref(false)
	const tableData = [
		{
			id: '1',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '微信',
			order_num: '87434893841',
			order_type: '扣款异常',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
		},
		{
			id: '2',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '开门异常',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
		},
		{
			id: '3',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '支付宝',
			order_num: '87434893841',
			order_type: '关门异常',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
		},
		{
			id: '4',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '金币',
			order_num: '87434893841',
			order_type: '识别异常',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
		},
		{
			id: '4',
			open_time: '2024-12-01 12:00:00',
			close_time: '2024-12-01 12:00:00',
			pay_time: '2024-12-01 12:00:00',
			pay_method: '金币',
			order_num: '87434893841',
			order_type: '已处理',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tell: '139849894494',
			personnel: '小郑',
			check: '详情',
		}
	]
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const searchList = ref<searchList[]>([
		{
			name: '开门时间',
			index: '1',
			placeholder: '请选择开门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '关门时间',
			index: '2',
			placeholder: '请选择关门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '支付时间',
			index: '3',
			placeholder: '请选择支付时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '支付方式',
			index: '4',
			placeholder: '请选择支付方式',
			type: '1',
			ivalue: ''
		},
		{
			name: '订单号',
			index: '5',
			placeholder: '请输入订单号',
			type: '2',
			ivalue: ''
		},
		{
			name: '订单状态',
			index: '6',
			placeholder: '请选择订单状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备名称',
			index: '7',
			placeholder: '请选择设备',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备编号',
			index: '8',
			placeholder: '请输入设备编号',
			type: '2',
			ivalue: ''
		},
		{
			name: '手机号码',
			index: '9',
			placeholder: '请输入用户手机号码',
			type: '2',
			ivalue: ''
		},
		{
			name: '补货员',
			index: '10',
			placeholder: '请选择设备补货员',
			type: '1',
			ivalue: ''
		}
	])
	const tabsList = [
		{
			name: '零柜售',
			index: '1'
		},
		{
			name: '提货柜',
			index: '2'
		}
	]
	const cutTabs = (tabItem : tabsList) => {
		activeIndex.value = tabItem.index;
	};
	const focusClick = (searchItem : searchList) => {
		choiceIndex.value = searchItem.index
	};
	const blurClick = () => {
		choiceIndex.value = ''
	};
</script>

<style lang="scss" scoped>
	.abnormal-page {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.title {
			font-size: 14px;
		}

		.top-tabs {
			text-align: center;
			display: flex;
			font-weight: bold;
			font-size: 14px;
			padding: 10px;

			.tabs-item {
				width: 150px;
				padding: 5px;
				background-color: #fff;
				border: 1px solid #d2d2d2;
				border-radius: 20px;
				margin-right: 15px;
			}

			.activity-item {
				background-color: #f0a93e;
				border: 1px solid #f0a93e;
				color: #fff;
			}

			.tabs-item:hover {
				cursor: pointer;
			}
		}

		.choice-list {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 0;

			.choice-item {
				width: 20%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;

				.el-select {
					width: 250px;
				}

				.choice-title {
					font-size: 12px;
					width: 100px;
					text-align: center;
				}

				.rounded-input {
					width: 250px;
				}
			}
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20px;
		}
		.tables {
			margin-top: 20px;
			.check-text {
				color: #0071bb;
				cursor: pointer;
			}
			.handle {
				color: #2686c5;
			}
			.abnormal {
				color: #ff4141;
			}
		}
	}
</style>